import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Text,
  Image,
  ScrollView,
  TouchableOpacity,
  ListView,
  DeviceEventEmitter,
} from 'react-native';
import Picker from 'react-native-picker';
import PxToDp from '../../utils/PxToDp';
import FontFamilys from '../../utils/FontFamilys';
// import Base from '../../utils/Base';
import { fetchOVerviewChannel } from '../../actions/ImportOverviewAction';
import Loading from '../Public/Loading';


// const { width } = Base.window;
let lookColors = [];     // 颜色偏好比例
let experienceTime = {}; // 体验时长
let avgCommunicateTime = '';
let avgLookCarTime = '';
let avgVoiceTime = '';
let carfoucus = [];      // 关注点占比
let dealerCarNews = []; // 车系
let lookColorsNew = [];
let carfoucusNew = [];   // 关注点占比
let selectSelf = []; // 车辆选配关注
let selectSelfNew = []; // 车辆选配关注
let propertyFocus = []; // 车辆性能关注
let propertyFocusNew = []; // 车辆性能关注
const channerList = [
  {
    channel: 1,
    name: '移动数字经销店',
  },
  {
    channel: 3,
    name: '触控可视化',
  },
];
let dataCar = [];
let channerListNew = [];

class OverviewAnalysis extends Component {
  componentDidMount() {
    this.props.dispatch(fetchOVerviewChannel('', 1, (data) => {
      if (data && data.err) {
        DeviceEventEmitter.emit('showToast', data.err);
      }
      if (data && data.result) {
        this.setState({ selectCarItem: data.result });
        this.setState({ selectCarItemName: data.result });
      }
    }));
  }
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });
    this.state = {
      dataSource: ds,
      Modelshow: false,
      noRender: true,
      ModelshowChannel: false,
      channelIdState: 1,
      channelIdStateAft: 1, // 选择渠道点击完成才会变化id,点击取消id还是上次选中的
      channelNameState2: '移动数字经销店', // 选择渠道了，没有点击完成按钮
      selectCarItem: '',
      selectCarItemId: '',
      selectCarItemIdAft: '', // 选择车系点击完成才会变化id,点击取消id还是上次选中的
      selectCarItemName: '', // 选择车系点击完成才变化标题
      isLoadCar: true,
    };
  }

  /*
  *默认展示数据
  */
  noCar() {
    const importOVerviewData = this.props.OverviewAnalyChannel;
    if (importOVerviewData) {
      if (importOVerviewData.cars) {
        let car = { id: '', num: 0, name: '', carId: '' }; // 车系偏好对象
        dealerCarNews = [];
        importOVerviewData.cars.map((data, i) => {
          car = { id: '', num: 0, name: '', carId: '' }; // 车系偏好对象
          car.id = i;
          car.num = i;
          car.name = data.i1;
          car.carId = data.id;
          dealerCarNews.push(car);
        });
      } else {
        this.setState({ selectCarItemName: '' });
      }
      this.data(importOVerviewData);
      this.carSelectAttent(importOVerviewData); // 车辆选配关注
      this.carPropAttent(importOVerviewData); // 车辆性能关注
    }
  }
  /*
  *车型展示数据
  */
  isCar() {
    const importOVerviewData = this.props.OverviewAnalyChannel;
    lookColorsNew = [];
    carfoucusNew = []; // 关注点占比
    selectSelfNew = []; // 车辆选配关注
    propertyFocusNew = []; // 性能关注
    if (importOVerviewData) {
      this.data(importOVerviewData);
      this.carSelectAttent(importOVerviewData); // 车辆选配关注
      this.carPropAttent(importOVerviewData); // 车辆性能关注
    }
  }
  /*
  *总览分析数据
  */
  data(importOVerviewData) {
    lookColors = importOVerviewData.look_colors;
    experienceTime = importOVerviewData.experience_time;
    carfoucus = importOVerviewData.carfoucus;
    if (experienceTime) {
      avgCommunicateTime = importOVerviewData.experience_time.avg_communicate_time;
      avgLookCarTime = importOVerviewData.experience_time.avg_look_car_time;
      avgVoiceTime = importOVerviewData.experience_time.avg_voice_time;
    }
    let colors = { id: '', name: '', color: '', num: 0 }; // 车系偏好对象
    if (lookColors && lookColors.length > 0) {
      lookColorsNew = [];
      lookColors.map((data, i) => {
        colors = { id: '', name: '', color: '', num: 0 }; // 车系偏好对象
        colors.id = i;
        colors.num = data[0];
        colors.name = data[1];
        colors.color = data[2];
        lookColorsNew.push(colors);
      });
    }
    let fources = { id: '', name: '', num: 0 }; // 关注点占比
    if (carfoucus && carfoucus.length > 0) {
      carfoucusNew = [];
      carfoucus.map((data, i) => {
        fources = { id: '', name: '', num: 0 }; // 关注点占比
        fources.id = i;
        fources.num = data[0];
        fources.name = data[1];
        carfoucusNew.push(fources);
      });
    }
  }

  // 车辆选配
  carSelectAttent(importOVerviewData) {
    if (importOVerviewData.select_self) {
      selectSelfNew = [];
      let selectObj = {};
      const goods1 = importOVerviewData.select_self[0].wheelhub_A_time >
          importOVerviewData.select_self[1].wheelhub_B_time; // 是否显示赞
      const goods2 = importOVerviewData.select_self[2].glass_0_time >
          importOVerviewData.select_self[3].glass_1_time; // 是否显示赞
      selectSelf = importOVerviewData.select_self;
      selectSelf.map((data, i) => {
        selectObj = { id: '', name: '', times: '', counts: '', img: '', good: false };    // 客户渠道
        selectObj.id = i;
        if (i === 0) {
          selectObj.name = data.wheelhub_A_name;
          selectObj.times = data.wheelhub_A_time;
          selectObj.counts = data.wheelhub_A_times;
          selectObj.img = require('../../img/home/d18.jpg');
          if (goods1) {
            selectObj.good = true;
          } else {
            selectObj.good = false;
          }
        } else if (i === 1) {
          selectObj.name = data.wheelhub_B_name;
          selectObj.times = data.wheelhub_B_time;
          selectObj.counts = data.wheelhub_B_times;
          selectObj.img = require('../../img/home/d19.jpg');
          if (goods1) {
            selectObj.good = false;
          } else {
            selectObj.good = true;
          }
        } else if (i === 2) {
          selectObj.name = data.glass_0_name;
          selectObj.times = data.glass_0_time;
          selectObj.counts = data.glass_0_times;
          selectObj.img = require('../../img/online/oNoGlass.jpg');
          if (goods2) {
            selectObj.good = true;
          } else {
            selectObj.good = false;
          }
        } else {
          selectObj.name = data.glass_1_name;
          selectObj.times = data.glass_1_time;
          selectObj.counts = data.glass_1_times;
          selectObj.img = require('../../img/online/oGlass.jpg');
          if (goods2) {
            selectObj.good = false;
          } else {
            selectObj.good = true;
          }
        }
        selectSelfNew.push(selectObj);
      });
    }
  }

  // 车辆性能关注
  carPropAttent(importOVerviewData) {
    if (importOVerviewData.property_focus && importOVerviewData.property_focus.length > 0) {
      propertyFocusNew = [];
      let property = {};
      propertyFocus = importOVerviewData.property_focus;
      propertyFocus.map((data, j) => {
        property = { id: '', name: '', counts: '', img: '' };    // 客户渠道
        property.id = j;
        property.name = data[0];
        property.counts = data[1];
        if (data[0] === '空间') {
          property.img = require('../../img/home/dSpare.png');
        } else if (data[0] === '外观') {
          property.img = require('../../img/home/dSurface.png');
        } else if (data[0] === '油耗') {
          property.img = require('../../img/home/dOil.png');
        } else if (data[0] === '内饰') {
          property.img = require('../../img/home/dInterior.png');
        } else if (data[0] === '动力') {
          property.img = require('../../img/home/dEngine.png');
        } else if (data[0] === '安全') {
          property.img = require('../../img/home/dSafe.png');
        } else if (data[0] === '性价比') {
          property.img = require('../../img/home/dPrice.png');
        } else if (data[0] === '舒适') {
          property.img = require('../../img/home/dComfort.png');
        } else {
          property.img = require('../../img/home/dSteering.png');
        }
        propertyFocusNew.push(property);
      });
    }
  }
  /*
  *选择客户渠道
  */
  channelShow() {
    const importOVerviewData = this.props.OverviewAnalyChannel;
    experienceTime = {};
    lookColorsNew = [];
    carfoucusNew = [];
    selectSelfNew = []; // 车辆选配关注
    propertyFocusNew = []; // 性能关注
    this.data(importOVerviewData);
    this.carSelectAttent(importOVerviewData); // 车辆选配关注
    this.carPropAttent(importOVerviewData); // 车辆性能关注
  }

  _showDatePicker() {
    dataCar = [];
    if (dealerCarNews && dealerCarNews.length > 0) {
      dealerCarNews.map((item) => {
        dataCar.push(item.name);
      });
    } else {
      return;
    }
    this._pickerShow(1, dataCar, this.state.selectCarItemName, '选择车系');
  }

  _showChannelPicker() {
    channerListNew = [];
    if (channerList && channerList.length > 0) {
      channerList.map((item) => {
        channerListNew.push(item.name);
      });
    } else {
      return;
    }
    this._pickerShow(2, channerListNew, this.state.channelNameState2, '选择客户渠道');
  }

  _pickerShow(flag, list, value, title) {
    const _this = this;
    Picker.init({
      pickerData: list,
      selectedValue: [value],
      pickerConfirmBtnText: '确认',
      pickerCancelBtnText: '取消',
      pickerTitleText: title,
      pickerBg: [255, 255, 255],
      pickerConfirmBtnColor: [65, 140, 255, 1],
      pickerCancelBtnColor: [139, 140, 142, 1],
      pickerTitleColor: [18, 18, 18, 1],
      pickerToolBarFontSize: 18,
      pickerFontSize: 15,
      onPickerConfirm: (data) => {
        if (flag === 1) {
          dealerCarNews.map((item) => {
            if (item.name === data[0]) {
              this.setState({ selectCarItem: item.name });
              this.setState({ selectCarItemId: item.carId });
              this.setState({ isLoadCar: true });
              this.setState({ selectCarItemName: item.name });
              this.props.dispatch(fetchOVerviewChannel(item.carId,
                _this.state.channelIdState, (result) => {
                  if (result.err) {
                    DeviceEventEmitter.emit('showToast', result.err);
                  }
                },
              ));
            }
          });
        } else {
          channerList.map((item) => {
            if (item.name === data[0]) {
              // this.setState({ channelNameState: item.name });
              this.setState({ channelIdState: item.channel });
              this.setState({ channelNameState2: item.name });
              this.setState({ isLoadCar: true });
              this.props.dispatch(fetchOVerviewChannel('',
                item.channel, (msg) => {
                  if (msg) {
                    this.setState({ selectCarItemName: msg.result });
                    this.setState({ selectCarItem: msg.result });
                  }
                },
              ));
            }
          });
        }
      },
      onPickerCancel: (data) => {
        console.log(data);
      },
      onPickerSelect: (data) => {
        console.log(data);
      },
    });
    Picker.show();
  }

  render() {
    const importOVerviewData = this.props.OverviewAnalyChannel;
    if (this.state.isLoadCar) {
      this.noCar();
      this.isCar();
      this.channelShow();
    }
    const lookcarTime = importOVerviewData && this.state.channelIdState === 3 ? importOVerviewData.experience_time.avg_look_car_time : '— —';
    const lookcarNum = importOVerviewData && this.state.channelIdState === 3 ? importOVerviewData.experience_time.share_num : '— —';
    return (
      <View style={[style.wrapper, style.flex]}>
        {
          this.props.OverviewAnalyChannel
          ?
            <ScrollView>
              <View style={style.scroll}>
                <View style={[style.row, style.top]}>
                  <TouchableOpacity
                    style={[style.flex, style.row]}
                    onPress={() => this._showChannelPicker()}
                  >
                    <Text style={[style.text]}>客户渠道-</Text>
                    <Text
                      style={[style.text, style.carName]}
                      numberOfLines={1}
                    >
                      {this.state.channelNameState2}
                    </Text>
                    <Image
                      style={style.trigleIcon}
                      source={require('../../img/home/daTriangle.png')}
                    />
                  </TouchableOpacity>
                  {
                    this.state.selectCarItemName
                    ?
                      <TouchableOpacity
                        style={[style.flex, style.row, style.carR]}
                        onPress={() => this._showDatePicker()}
                      >
                        <Text
                          style={[style.carName, style.text]}
                          numberOfLines={1}
                        >
                          {this.state.selectCarItemName}
                        </Text>
                        <Image
                          style={style.trigleIcon}
                          source={require('../../img/home/daTriangle.png')}
                        />
                      </TouchableOpacity>
                    :
                    null
                  }

                </View>

                {
                  this.state.channelIdState === 1
                  ?
                    <View>
                      <View style={style.hLine} />
                      <View style={[style.allCon]}>
                        <View style={[style.row, style.totalV]}>
                          <Text style={[style.titleText]}>
                          车辆性能关注
                        </Text>
                          <Text style={style.total}>
                        共{propertyFocusNew && propertyFocusNew.length > 0
                          ?
                           propertyFocusNew.length
                          :
                          0} 页
                          </Text>
                        </View>

                        {
                          propertyFocusNew
                          ?
                            <ListView
                              horizontal
                              dataSource={this.state.dataSource.cloneWithRows(propertyFocusNew)}
                              enableEmptySections
                              onEndReachedThreshold={propertyFocusNew.length}
                              renderRow={rowData => (
                                <TouchableOpacity
                                  disabled
                                  style={style.innerCont}
                                  key={`${rowData.id}-${Math.random(1000000)}`}
                                >
                                  <Text style={style.proopertyNo}>{rowData.counts}次</Text>
                                  <View style={style.row}>
                                    <Image style={style.propertyIcon} source={rowData.img} />
                                    <Text style={style.propertyName}>{rowData.name}</Text>
                                  </View>
                                </TouchableOpacity>
                            )
                           }
                            />
                          : null
                        }
                      </View>
                      <View style={style.hLine} />
                    </View>
                  :
                    <View>
                      <View style={style.hLine} />
                      <View style={[style.allCon, style.contLeft]}>
                        <Text style={[style.titleText]}>
                        数据统计
                      </Text>
                        <View style={[style.row, style.dataBtnV]}>
                          <TouchableOpacity
                            disabled
                            style={style.dataBtn}
                          >
                            <Text style={style.dataNumT}>{lookcarTime}</Text>
                            <View style={style.row}>
                              <Image
                                source={require('../../img/home/data-lookcar.png')}
                              />
                              <Text style={[style.text, style.dataTR]}>平均看车时长</Text>
                            </View>
                          </TouchableOpacity>
                          <TouchableOpacity
                            disabled
                            style={[style.dataBtn, style.dataBtnR]}
                          >
                            <Text style={style.dataNumT}>{lookcarNum}</Text>
                            <View style={style.row}>
                              <Image
                                source={require('../../img/home/data-share.png')}
                              />
                              <Text style={[style.text, style.dataTR]}>总分享次数</Text>
                            </View>
                          </TouchableOpacity>
                        </View>
                      </View>
                      <View style={style.hLine} />
                    </View>
                }


                <View style={[style.hLine, style.lineTop]} />
                <View style={[style.allCon, style.contLeft]}>
                  <Text style={[style.titleText, style.colorText]}>
                      颜色偏好比例
                    </Text>
                  {lookColorsNew.map(data => (
                    <View
                      style={[style.row, style.progress]}
                      key={`${data.id}-${Math.random(1000000)}`}
                    >
                      <View style={[style.row, style.colorIcon]}>
                        <View
                          style={[style.triangleTopleft, { borderTopColor: data.color }]}
                        />
                        <View
                          style={[style.triangleBottomright, { borderBottomColor: data.color }]}
                        />
                      </View>
                      <View>
                        <View style={[style.row, style.corlorPrecent]}>
                          <Text style={[style.text]}>{data.name}</Text>
                          <Text style={[style.colorNum]}>{data.num}%</Text>
                        </View>
                        <View style={[style.outBar, style.row]}>
                          <View style={{ flex: data.num, backgroundColor: '#f65252' }} />
                          <View style={{ flex: 100 - data.num, backgroundColor: '#e7eeea' }} />
                        </View>
                      </View>
                    </View>
                  ))}
                </View>
                <View style={style.hLine} />

                {
                  this.state.channelIdState === 1
                  ?
                    <View>
                      <View style={[style.hLine, style.lineTop]} />
                      <View style={style.allCon}>
                        <Text style={[style.titleText]}>
                        车辆选配关注
                      </Text>
                        <View style={style.colorBg}>
                          { selectSelfNew
                          ?
                            selectSelfNew.map(data => (
                              <View
                                key={`${data.id}-${Math.random(1000000)}`}
                                style={style.carItemV}
                              >
                                <View style={style.row}>
                                  <View>
                                    <View style={style.goodView}>
                                      <Image style={style.topIcon} source={data.img} />
                                    </View>
                                  </View>
                                  <View>

                                    <View style={style.row}>
                                      <Text style={style.topName}>{data.name}</Text>
                                      {
                                        data.good && data.times
                                      ?
                                        <Image source={require('../../img/home/dGood.png')} />
                                      :
                                         null
                                      }
                                    </View>
                                    <View style={[style.row, style.carTimeV]}>
                                      <View style={[style.row, style.carLV]}>
                                        <Image style={style.carLIcon} source={require('../../img/home/data-match-time.png')} />
                                        <Text style={[style.text12]}>
                                          访问
                                        </Text>
                                        <Text style={style.minNum}>{data.times}</Text>
                                        <Text style={style.minT}>分</Text>
                                      </View>
                                      <Image style={[style.carRIcon]} source={require('../../img/home/data-match-eye.png')} />
                                      <Text style={[style.text12]}>观看</Text>
                                      <Text style={style.minNum}>{data.counts} </Text>
                                      <Text style={style.minT}>次</Text>
                                    </View>

                                  </View>
                                </View>
                                <View style={[style.hLine, style.carLine]} />
                              </View>
                        ))
                        : null
                        }
                        </View>
                      </View>
                      <View style={style.hLine} />
                    </View>
                  :
                  null
                }


                {
                  this.state.channelIdState === 1
                  ?
                    <View>
                      <View style={[style.hLine, style.lineTop]} />
                      <View style={[style.allCon, style.contLeft]}>
                        <View style={style.row}>
                          <Text style={[style.titleText, style.timeText]}>体验时长</Text>
                          <Text style={style.timeTip}>（分）</Text>
                        </View>
                        <View style={[style.row, style.borderBottom]}>
                          <Text style={style.text}>平均语音留言时长</Text>
                          <View style={[style.row, style.timeR]}>
                            <Image style={style.timeIcon} source={require('../../img/home/daTime.png')} />
                            <Text style={style.colorNum}>{avgVoiceTime}</Text>
                          </View>
                        </View>

                        <View style={[style.row, style.borderBottom]}>
                          <Text style={[style.text]}>平均通话时长</Text>
                          <View style={[style.row, style.timeR]}>
                            <Image style={style.timeIcon} source={require('../../img/home/daTime.png')} />
                            <Text style={style.colorNum}>{avgCommunicateTime}</Text>
                          </View>
                        </View>

                        <View style={[style.row, style.timeBottom]}>
                          <Text style={[style.text]}>平均看车时长</Text>
                          <View style={[style.row, style.timeR]}>
                            <Image style={style.timeIcon} source={require('../../img/home/daTime.png')} />
                            <Text style={style.colorNum}>{avgLookCarTime}</Text>
                          </View>
                        </View>
                      </View>
                      <View style={style.hLine} />
                    </View>
                  :
                  null
                }


                <View style={[style.hLine, style.lineTop]} />
                <View style={[style.allCon, style.contLeft]}>
                  <Text style={[style.titleText]}>
                   客户关注点占比
                  </Text>
                  {
                    propertyFocusNew
                  ?
                    <ListView
                      horizontal
                      dataSource={this.state.dataSource.cloneWithRows(carfoucusNew)}
                      enableEmptySections
                      onEndReachedThreshold={carfoucusNew.length}
                      renderRow={rowData => (
                        <View
                          style={style.attView}
                          key={`${rowData.id}-${Math.random(1000000)}`}
                        >
                          <Text style={style.colorNum}>{rowData.num}%</Text>
                          <View style={[style.outBarTime, style.row]}>
                            <View style={[style.innerBarTime, { height: 107 - rowData.num }]} />
                          </View>
                          <Text style={style.text}>{rowData.name}</Text>
                        </View>
                      )
                      }
                    />
                  :
                    null
                  }
                </View>
                <View style={style.hLine} />

              </View>
            </ScrollView>
          :
            <Loading />
        }
      </View>
    );
  }
}
const style = StyleSheet.create({
  wrapper: {
    backgroundColor: '#F9F9F9',
  },
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  top: {
    height: PxToDp(44),
    paddingTop: PxToDp(20),
    paddingLeft: PxToDp(20),
    paddingRight: PxToDp(20),
  },
  colorBg: {
    backgroundColor: '#FFFFFF',
    paddingTop: PxToDp(5),
    paddingRight: PxToDp(20),
  },
  corlorPrecent: {
    justifyContent: 'space-between',
  },
  borderBottom: {
    borderBottomWidth: PxToDp(0.5),
    borderStyle: 'solid',
    borderColor: '#dadada',
    justifyContent: 'space-between',
    paddingTop: PxToDp(21),
    paddingBottom: PxToDp(23),
  },
  timeText: {
    marginBottom: PxToDp(6),
  },
  progress: {
    marginTop: PxToDp(34),
    width: '100%',
  },
  topIcon: {
    height: PxToDp(46),
    width: PxToDp(68),
  },
  goodView: {
    marginLeft: PxToDp(-15),
  },
  topName: {
    fontFamily: FontFamilys(),
    fontSize: PxToDp(15),
    color: '#000',
    marginTop: PxToDp(2),
    marginLeft: PxToDp(8),
    width: PxToDp(105),
  },
  propertyIcon: {
    marginLeft: PxToDp(16),
    marginTop: PxToDp(10),
  },
  propertyName: {
    marginLeft: PxToDp(7),
    marginTop: PxToDp(9),
    color: '#121212',
    fontSize: PxToDp(13),
  },
  proopertyNo: {
    marginLeft: PxToDp(29),
    marginTop: PxToDp(13),
    color: '#418cff',
    fontSize: PxToDp(15),
  },
  titleText: {
    fontSize: PxToDp(18),
    color: '#121212',
    fontFamily: FontFamilys(),
  },
  allCon: {
    backgroundColor: '#fff',
    paddingTop: PxToDp(20),
    paddingLeft: PxToDp(20),
    paddingBottom: PxToDp(20),
  },
  innerCont: {
    height: PxToDp(78),
    width: PxToDp(100),
    backgroundColor: '#FFF',
    borderColor: '#e2e3e4',
    borderStyle: 'solid',
    borderWidth: PxToDp(0.5),
    marginTop: PxToDp(16),
    marginRight: PxToDp(20),
  },
  triangleTopleft: {
    width: 0,
    height: 0,
    borderTopWidth: PxToDp(28),
    borderStyle: 'solid',
    borderRightWidth: PxToDp(28),
    borderRightColor: 'transparent',
    opacity: 0.7,
  },
  triangleBottomright: {
    width: 0,
    height: 0,
    borderStyle: 'solid',
    borderBottomWidth: PxToDp(28),
    borderLeftColor: 'transparent',
    borderLeftWidth: PxToDp(28),
    marginLeft: PxToDp(-28),
  },
  outBar: {
    height: PxToDp(8),
    backgroundColor: '#e7eeea',
    width: PxToDp(280),
    marginTop: PxToDp(6),
  },
  outBarTime: {
    height: PxToDp(107),
    backgroundColor: '#2ab9fd',
    width: PxToDp(8),
    marginTop: PxToDp(7),
  },
  innerBarTime: {
    width: PxToDp(8),
    backgroundColor: '#EEEFF3',
  },
  colorNum: {
    fontSize: PxToDp(15),
    color: '#8b8c8e',
  },
  colorIcon: {
    marginRight: PxToDp(8),
    marginTop: PxToDp(2),
  },
  colorText: {
    marginBottom: PxToDp(-9),
  },
  timeIcon: {
    marginRight: PxToDp(10),
    marginLeft: PxToDp(5),
  },
  timeBottom: {
    paddingTop: PxToDp(21),
    paddingBottom: PxToDp(5),
    justifyContent: 'space-between',
  },
  timeTip: {
    marginLeft: PxToDp(7),
    color: '#d9dadd',
    fontSize: PxToDp(14),
    fontFamily: FontFamilys(),
    marginTop: PxToDp(2),
  },
  attView: {
    paddingTop: PxToDp(30),
    paddingBottom: PxToDp(3),
    alignItems: 'center',
    marginRight: PxToDp(25),
  },
  trigleIcon: {
    marginLeft: PxToDp(9),
    marginTop: PxToDp(8),
  },
  text: {
    color: '#121212',
    fontSize: PxToDp(13),
    fontFamily: FontFamilys(),
  },
  scroll: {
    paddingBottom: PxToDp(67),
  },
  carName: {
    width: PxToDp(70),
    maxWidth: PxToDp(70),
  },
  carR: {
    justifyContent: 'flex-end',
  },
  hLine: {
    width: '100%',
    height: PxToDp(0.5),
    backgroundColor: '#e4e4e4',
  },
  lineTop: {
    marginTop: PxToDp(10),
  },
  total: {
    fontFamily: FontFamilys(),
    fontSize: PxToDp(12),
    color: '#8b8c8e',
    marginTop: PxToDp(4),
  },
  totalV: {
    paddingRight: PxToDp(20),
    justifyContent: 'space-between',
  },
  text12: {
    fontSize: PxToDp(12),
    color: '#121212',
    fontFamily: FontFamilys(),
  },
  minT: {
    fontSize: PxToDp(11),
    color: '#d9dadd',
    fontFamily: FontFamilys(),
    marginTop: PxToDp(1),
  },
  minNum: {
    fontSize: PxToDp(12),
    color: '#8b8c8e',
    fontFamily: FontFamilys(),
    marginLeft: PxToDp(5),
  },
  carItemV: {
    paddingBottom: PxToDp(15),
    paddingTop: PxToDp(15),
  },
  carLine: {
    marginTop: PxToDp(15),
  },
  contLeft: {
    paddingRight: PxToDp(20),
  },
  timeR: {
    justifyContent: 'flex-start',
    width: PxToDp(80),
  },
  carTimeV: {
    marginTop: PxToDp(8),
  },
  carLV: {
    width: PxToDp(130),
  },
  dataBtnV: {
    paddingTop: PxToDp(16),
  },
  dataBtn: {
    paddingTop: PxToDp(14),
    paddingBottom: PxToDp(20),
    alignItems: 'center',
    borderStyle: 'solid',
    borderWidth: PxToDp(0.5),
    borderColor: '#e2e3e4',
    flex: 1,
  },
  dataBtnR: {
    marginLeft: PxToDp(20),
  },
  dataNumT: {
    color: '#418cff',
    fontSize: PxToDp(15),
    fontFamily: FontFamilys(),
    fontWeight: 'bold',
    marginBottom: PxToDp(9),
  },
  dataTR: {
    marginLeft: PxToDp(9),
  },
  carLIcon: {
    marginLeft: PxToDp(8),
    marginRight: PxToDp(5),
  },
  carRIcon: {
    marginRight: PxToDp(5),
  },
});
export default OverviewAnalysis;
